<template>
    <div id="classList">
        <div class="breadcrumb">
            <img src="../../../../static/img/campus_icon_1.png" class="head_img">
            <span class="title" @click="toDep()">院系管理</span>
            <span class="title" @click="toClist">/班级列表</span>/ 班级详情
        </div>
        <div class="list">
            <div class="list_head">
                <el-button class="float-right" type="primary" @click="cancel">返回</el-button>
            </div>
            <el-table :data="list">
                <el-table-column prop="campusId" label="学号">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="gender" label="性别">
                </el-table-column>
                <el-table-column prop="cName" label="已选课程" show-overflow-tooltip>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
                    :total="totalCount" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapState,
        mapActions
    } from "vuex";

    export default {
        data() {
            return {
                list: [],
                totalCount: 0,
                currentPage: 1
            };
        },
        mounted() {
            this.getClassDet();
        },
        computed: mapState({
            user: state => state.user
        }),
        methods: {
            cancel() {
                history.back();
            },
            toClist() {
                location.href = "/#/editAdminClass";
            },
            toDep() {
                location.href = "/#/departManage";
            },
            getClassDet() {
                let url = this.$util.domain + "/campusadminapi/v2/gradeclass/classdetail";

                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        pageSize: 10,
                        pageNum: this.currentPage,
                        classId: this.$util.getStore("classId") * 1
                    })
                }).then(response => {
                    let data = response.data.data;
                    if (response.data.error == 10000) {
                        let list = data.list;
                        this.list = [];
                        this.totalCount = data.totalNum;

                        if (list && list.length) {
                            list.forEach(item => {
                                let gender = item.gender ? "女" : "男";
                                this.list.push({
                                    gender,
                                    name: item.name,
                                    cName: item.className,
                                    campusId: item.campusId
                                })
                            });
                        }
                    }
                })
            },
            handleCurrentChange(val) {
                //请求分页数据
                this.currentPage = val;
                this.getClassDet();
            }
        }
    };
</script>

<style>
    #classList {
        padding-top: 80px;
        height: calc(100% - 100px);
    }
    
    #classList .list {
        padding-bottom: 20px;
        height: calc(100% - 30px);
    }
    
    #classList .float-right {
        float: right;
        margin-left: 10px;
    }
    
    #classList .title {
        color: #0398ff;
    }
</style>